Skip to content

[Alerting v2] [Rule authoring] Add compressed prop to flyout rule form fields#260936

Open
yiannisnikolopoulos wants to merge 1 commit intoelastic:mainfrom
yiannisnikolopoulos:use-compressed-prop-for-rule-flyout-fields
Open

[Alerting v2] [Rule authoring] Add compressed prop to flyout rule form fields#260936
yiannisnikolopoulos wants to merge 1 commit intoelastic:mainfrom
yiannisnikolopoulos:use-compressed-prop-for-rule-flyout-fields

Conversation

@yiannisnikolopoulos
Copy link
Copy Markdown
Contributor

@yiannisnikolopoulos yiannisnikolopoulos commented Apr 2, 2026

Closes elastic/rna-program#244

Summary

Applies EUI compressed density to all form input components when the rule form is rendered in flyout layout (layout === 'flyout'). The full-page layout is unaffected.

The change follows the pattern established in #260750: read layout from useRuleFormMeta() and conditionally apply flyout-specific props.

What changed

Shared utility components — added a compressed prop to the interface so callers can pass it down without these components reaching into context:

  • NumberInput — forwarded to EuiFieldNumber via ...rest
  • DurationInput — passed explicitly to NumberInput and EuiSelect
  • LookbackWindow, RuleSchedule — forwarded via {...props} spread to DurationInput

Field components — each reads const { layout } = useRuleFormMeta() and passes compressed={layout === 'flyout'} to its EUI input:

  • TagsFieldEuiComboBox
  • DescriptionFieldEuiTextArea
  • RecoveryTypeFieldEuiSelect
  • GroupFieldSelectEuiComboBox
  • TimeFieldSelectEuiSelect
  • ScheduleField / LookbackWindowField → threaded down to DurationInput
  • AlertDelayField / RecoveryDelayFieldEuiButtonGroup buttonSize ('compressed' in flyout, 's' in page)
  • StateTransitionCountFieldNumberInput
  • StateTransitionTimeframeFieldDurationInput

Excluded (no compressed prop in EUI): NameField (EuiInlineEditTitle), KindField (EuiCheckableCard), RunbookField (markdown modal).

Testing

  • Added flyout layout smoke tests to all modified test files
  • Created tags_field.test.tsx (was missing)

@yiannisnikolopoulos yiannisnikolopoulos self-assigned this Apr 2, 2026
@yiannisnikolopoulos yiannisnikolopoulos requested a review from a team as a code owner April 2, 2026 13:48
@yiannisnikolopoulos yiannisnikolopoulos added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting labels Apr 2, 2026
@github-actions github-actions bot added the author:actionable-obs PRs authored by the actionable obs team label Apr 2, 2026
@macroscopeapp
Copy link
Copy Markdown
Contributor

macroscopeapp bot commented Apr 2, 2026

Approvability

Verdict: Needs human review

Mechanical UI change adding compressed styling prop to form fields in flyout layout - low risk and straightforward. However, all 27 files are owned by @elastic/rna-project-team and the author is not a code owner, so designated team review is appropriate.

You can customize Macroscope's approvability policy. Learn more.

@elasticmachine
Copy link
Copy Markdown
Contributor

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

  • [job] [logs] Scout: [ platform / workflows_management ] plugin / local-serverless-security_complete - Workflow execution - Alert triggers - should trigger workflow from alert

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
alertingVTwo 280.7KB 281.3KB +549.0B

cc @yiannisnikolopoulos

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

author:actionable-obs PRs authored by the actionable obs team backport:skip This PR does not require backporting release_note:skip Skip the PR/issue when compiling release notes

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants